import { Column } from '@ant-design/plots';
import React from 'react';

export type chartProps = {
  data: any[];
  xfield: string;
  yfield: string;
  seriesField: string | undefined;
  height:number|undefined;

  conversionTag: any;

  displayLabel: any;
  backColor: string | undefined;
};

// let defPointStyle = {
//   size: 5,
//   shape: 'circle',
//   style: {
//     fill: 'white',
//     stroke: '#5B8FF9',
//     lineWidth: 2,
//   },
// }

const PlotChart: React.FC<chartProps> = (props) => {
  const { data, xfield, yfield, seriesField, height, displayLabel, backColor,conversionTag } = props;
  return (<>
    <Column
          style={{
            width:'100%',
            height:height ? height : '100%',
            backgroundColor:backColor
          }}
          data={data}
          xField= {xfield}
          yField= {yfield}
          seriesField= {seriesField}
          label= {displayLabel}
          conversionTag={conversionTag}
          state= {{
            active: {
              style: {
                shadowBlur: 4,
                stroke: '#000',
                fill: 'red',
              },
            },
          }}
          interactions= {[
            {
              type: 'marker-active',
            },
          ]}
          />
      </>
  );
};

export default PlotChart;
